
<template>
   
    <div class="chat-window center">

        <div class="chat-messages">
            <div v-for="(item, index) in items" :key="index"
                :class="{ 'message received-message': !item.flg, 'message sent-message': item.flg }">
                <div class="message-received">
                    <img :src="item.img" class="avatar" alt="(图片无法显示)">
                    <span class="message-content">{{ item.title }}</span>
                </div>
            </div>
        </div>

        <!-- <footer-item-vue @add-click="addClick"></footer-item-vue> -->
        <footer-item-vue @add-click="addClick"></footer-item-vue>
    </div>
</template>
<script>

// 父组件定义
import FooterItemVue from './FooterItemVue.vue';
export default {
    components: {
        FooterItemVue,
    },
    data: function () {
        return {
            newTask: "",
            items: [
                {
                    title: "好久不见！",
                    img: require("@/assets/images/avt-01.png"),
                    flg: false
                },
                {
                    title: "是啊，好久不见了",
                    img: require("@/assets/images/avt-02.png"),
                    flg: true
                },
                {
                    title: "最近怎么样？",
                    img: require("@/assets/images/avt-01.png"),
                    flg: false
                }
            ]
        };
    },
    methods: {
        addClick: function (newTask) {
            if (newTask.trim() !== "") {
                this.items.push({
                    title: newTask,
                    flg: true, // 表示发送的消息
                    img: require("@/assets/images/avt-02.png"),
                });
                this.newTask = ""; // 清空输入框
            }
        }
    },
}
</script>